.dropdown-item {
    display: flex;
    flex-direction: row;

    i {
        margin-left: auto;
        font-size: 1.5rem;
    }

}

.panel-group {
    margin: 1rem 0;

    .panel {
        margin: 0px;
        background-color: none;
        margin-bottom: 1px;

        a {
            display: flex;
            text-decoration: none;
            gap: 5px;
        }

        &.info {
            a {
                color: white;
            }
        }

        &:first-of-type {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        &:last-of-type {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    }
}

.app {
    display: grid;
    // grid-template: 1fr auto / auto 1fr;
    grid-template-columns: 1fr;

    grid-template-rows: auto 1fr auto;
    height: var(--app-height);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    transition: all ease-in-out .3s;
    //padding-right: 400px;

    @media all and (max-width: 1000px) {
        width: 100%;

    }


    &-controls {
        grid-row-start: 3;

        display: none;

        @media all and (max-width: 1000px) {
            display: flex;
        }

    }

    &-navigation {

        display: flex;
        flex-direction: row;
        width: 100%;
        // position: fixed;
        left: 0px;
        top: 0px;
        height: 70px;
        background-color: var(--background-color-7);
        z-index: 99;

        align-items: center;
        // border-right: 1px solid var(--border-primary);
        // max-width: 85rem;
        margin: 0 auto;
        position: sticky;
        top: 0px;
        border-top: 1px solid var(--border-color);
        grid-row-start: 3;

        @media all and (max-width: 1000px) {
            position: fixed;
            bottom: 0;
            height: auto;
            width: 100%;
            height: calc(env(safe-area-inset-bottom) + 60px);
            top: auto;
            padding-bottom: env(safe-area-inset-bottom);
            border-right: none;

            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
            grid-column: 1 / span 2;

            border: 1px solid var(--border-color);
            border-top: transparent;

            border-bottom-right-radius: 1rem;
            border-bottom-left-radius: 1rem;


            .logo {
                display: none !important;
            }
        }

        .logo {
            margin: 0 20px;


            letter-spacing: -0.3px;

            font-family: Poppins, sans-serif;
            font-weight: 600;
            font-size: 1.4em;
            line-height: 1.65;


        }

        nav {
            // padding-bottom: calc(env(safe-area-inset-bottom) + 5px);


            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            justify-content: center;
            // padding: 15px;
            padding: 15px;
            flex-grow: 0;
            height: auto;
            flex-basis: auto;

            .icon {
                display: grid;
                place-content: center;
                width: 40px;
                height: 40px;
                border-radius: 10px;
                // background-color: #f3f3f3;
                font-size: 1.67rem;

                // background-color: #191919;

            }

            &:hover,
            &.active {

                &:before {
                    content: "";
                    display: block;
                    width: 7px;
                    height: 7px;
                    position: absolute;
                    background-color: #b1b1b1;
                    bottom: 7px;
                    left: 50%;
                    transform: translateX(-50%) rotate(45deg);
                    border-radius: 3px;

                }

                opacity: 1;

                .icon {
                    color: var(--black);
                    //background: var(--accent-color);
                    //color: #000;
                }

            }

            .text {
                position: absolute;
                background: #131313 !important;
                white-space: nowrap;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                top: 70px;
                color: white;
                transform-origin: center left;
                display: none;
                z-index: 16;


                &:before {
                    content: "";
                    display: block;
                    width: 12px;
                    height: 12px;
                    position: absolute;
                    background-color: #131313;
                    top: -5px;
                    left: 50%;
                    transform: translateX(-50%) rotate(45deg);
                    border-radius: 3px;
                }

            }

            &:hover {
                cursor: pointer;

                .text {
                    display: block;
                    animation: fadeInShow .1s;
                }

            }


            &:hover {
                cursor: pointer;
            }




            @media all and (max-width: 1000px) {
                .text {
                    display: none !important;
                }

                flex-grow: 1;
                flex-basis: 0;
                padding: 15px 0px;

            }
        }
    }




    &-content {
        overflow: auto;
        position: relative;
        grid-row-start: 2;



        @media all and (max-width: 1000px) {
            width: 100%;
            max-width: 100vw;
            margin-left: 0;
            padding-bottom: 80px;
        }
    }



}



/*.dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;

    i {
        margin-left: auto;
        font-size: 1.5rem;
    }
}

.app {
    display: grid;
    // grid-template: 1fr auto / auto 1fr;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    height: var(--app-height);
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;


    &-navigation {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        padding: 15px;
        width: auto;
        gap: 1rem;
        border-right: 1px solid var(--border-color);
        align-items: center;
        z-index: 999999;

        .logo {
            max-width: 60px;
            height: 60px;
            display: grid;
            place-content: center;



            h3 {
                margin: 0px;
                font-size: 100%;
                // color: black;
                // background: #3ec7c2;
                // height: 70px;
                // display: grid;
                // place-content: center;
                // width: 70px;
                //padding: 15px;
                // border-radius: 15px;
            }
        }

        &-item {
            display: grid;
            align-items: center;
            position: relative;
            grid-template-columns: 1fr;
            gap: 1rem;
            border-radius: 1rem;
            width: 60px;
            height: 60px;

            .icon {
                font-size: 1.5rem;
                padding: 1rem;
                display: grid;
                place-content: center;
                border-radius: 1rem;
            }

            .text {
                position: fixed;
                background: #131313 !important;
                white-space: nowrap;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                left: 70px;
                color: white;
                transform-origin: center left;
                display: none;
                z-index: 999999;


                &:before {
                    content: "";
                    display: block;
                    width: 12px;
                    height: 12px;
                    position: absolute;
                    background-color: #131313;
                    left: -5px;
                    top: 50%;
                    transform: translateY(-50%) rotate(45deg);
                    border-radius: 3px;
                }

                margin-top: 0px;
            }

            &:hover {
                cursor: pointer;

                .text {
                    display: block;
                    animation: fadeInShow .1s;
                }

            }


            &.active {
                opacity: 1;
                // background-color: aquamarine;
            }
        }

    }

    &-content {
        grid-column: 2;
        overflow: auto;
        position: relative;
    }




    @media all and (max-width: 1000px) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        gap: 0;

        &-content {
            width: 100%;
            grid-column: 1;
            grid-row: 1;
            max-width: 100vw;
        }

        &-navigation {
            .logo {
                display: none;
            }

            order: 2;
            flex-direction: row;
            width: 100%;
            padding-bottom: env(safe-area-inset-bottom);
            padding-top: 5px;
            grid-column: 1;
            grid-row: 2;

            &-item {
                flex-grow: 1;
                flex-basis: 0;
            }
        }
    }
}*/